import React from "react";
import "./detail.less";
import { Card } from "antd";
import axios from "@/axios/index"; //封装的ajax
import Utils from "../../utils/utils"; //时间 分页
export default class OrderDetail extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {
    let orderId = this.props.match.params.orderId;
    if (orderId) {
      this.getdetailInfo(orderId);
    }
  }

  getdetailInfo = orderId => {
    axios
      .ajax({
        url: "/order/detail",
        data: {
          params: {
            orderId: orderId
          }
        }
      })
      .then(res => {
        if (res.code == 0) {
          this.setState({
            orderInfo: res.result
          });
          this.baiduMap(res.result); //调用百度地图
        }
      });
  };

  baiduMap = result => {
    // 如果 提示BMap找不到 改成 window.BMap
    this.map = new BMap.Map("orderDetailMap");
    // this.map.centerAndZoom("北京", 11);
    //添加地图控件
    this.addMapControl();
    //调用绘制路线图
    this.darw(result.position_list);
    //调用绘制服务区
    this.drawServerArea(result.area);
  };

  //百度地图控件
  addMapControl = () => {
    let map = this.map;
    map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_RIGHT }));
    map.addControl(
      new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT })
    );
  };

  //绘制路线图
  darw = (positionList) => {
    let map = this.map;
    let startPoint = "";
    let endPoint = "";
    if (positionList.length > 0) {
      let first = positionList[0]; //起始点坐标
      let last = positionList[positionList.length-1]; //结束点坐标
      startPoint = new BMap.Point(first.lon, first.lat); //坐标经度纬度
      //起始点图标
      let startIcon = new BMap.Icon(
        "../../../src/img/start_point.png",
        new BMap.Size(36, 42),
        { imageSize: new BMap.Size(36, 42), anchor: new BMap.Size(36, 42) }
      );
      let startMarker = new BMap.Marker(startPoint,{icon:startIcon});
      this.map.addOverlay(startMarker)

      //结束点图标
      endPoint = new BMap.Point(last.lon, last.lat); //坐标经度纬度
      let endIcon = new BMap.Icon(
        "../../../src/img/end_point.png",
        new BMap.Size(36, 42),
        { imageSize: new BMap.Size(36, 42), anchor: new BMap.Size(36, 42) }
      );
      let endMarker = new BMap.Marker(endPoint,{icon:endIcon});
      this.map.addOverlay(endMarker)

      //连接行程路线
      let trackPoint = [];
      for(let i =0;i<positionList.length;i++){
        let point = positionList[i]
        trackPoint.push(new BMap.Point(point.lon,point.lat))
      }
      let polyline = new BMap.Polyline(trackPoint,{
        strokeColor:"blue",
        strokeWeight:3,
        strokeOpacity:1
      })
      this.map.addOverlay(polyline)
      this.map.centerAndZoom(endPoint, 11); //重新设置中心坐标点
    }
  };
  // 绘制服务区
  drawServerArea = (positionList) =>{
    //遍历服务区坐标
    let trackPoint = [];
    for(let i =0;i<positionList.length;i++){
      let point = positionList[i]
      trackPoint.push(new BMap.Point(point.lon,point.lat))
    }
    //绘制区域
    let polygon = new BMap.Polygon(trackPoint,{
      strokeColor:"red",
      strokeWeight:4,
      strokeOpacity:1,
      fillColor:"#ff8605",
      fillOpacity:0.2
    })
    this.map.addOverlay(polygon)
  }

  render() {
    const info = this.state.orderInfo || {};
    return (
      <div>
        <Card>
          {/* 这个id控制地图位置 */}
          <div id="orderDetailMap" className="order-map" />
          <div className="detail-items">
            <div className="item-title">基础信息</div>
            <ul className="detail-form">
              <li>
                <div className="detail-form-left">用车模式</div>
                <div className="detail-form-content">
                  {info.mode == 1 ? "服务区" : "停车点"}
                </div>
              </li>
              <li>
                <div className="detail-form-left">订单编号</div>
                <div className="detail-form-content">{info.order_sn}</div>
              </li>
              <li>
                <div className="detail-form-left">车辆编号</div>
                <div className="detail-form-content">{info.bike_sn}</div>
              </li>
              <li>
                <div className="detail-form-left">用户姓名</div>
                <div className="detail-form-content">{info.user_name}</div>
              </li>
              <li>
                <div className="detail-form-left">手机号码</div>
                <div className="detail-form-content">{info.mobile}</div>
              </li>
            </ul>
          </div>

          <div className="detail-items">
            <div className="item-title">行驶轨迹</div>
            <ul className="detail-form">
              <li>
                <div className="detail-form-left">行程起点</div>
                <div className="detail-form-content">{info.start_location}</div>
              </li>
              <li>
                <div className="detail-form-left">行程终点</div>
                <div className="detail-form-content">{info.start_location}</div>
              </li>
              <li>
                <div className="detail-form-left">行驶里程</div>
                <div className="detail-form-content">
                  {info.distance / 1000}公里
                </div>
              </li>
            </ul>
          </div>
        </Card>
      </div>
    );
  }
}
